<template>
  <div>
    <a-drawer
      title="项目详情"
      placement="right"
      :closable="true"
      :maskClosable="true"
      :visible="visible"
      width="50%"
      @close="handleClose"
      :body-style="{
        paddingBottom: '80px',
      }"
      destroy-on-close
    >
      <ProjectDetailContent
        v-bind="props"
        @handleClose="handleClose"
        @toEdit="toEdit"
        @deleteCancel="deleteCancel"
      />
    </a-drawer>
  </div>
</template>

<script>
import { defineComponent, ref, watch, createVNode } from "vue";
import ProjectDetailContent from "@/views/allComponents/ProjectDetailContent/index.vue";
export default defineComponent({
  name: "ProjectDetail",
  components: { ProjectDetailContent },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
    showDel: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {

    const handleClose = () => {
      context.emit("cancel");
    };
    const toEdit = (data) => {
      context.emit("edit", data);
    };

    const deleteCancel = ()  => {
      context.emit("deleteCancel");
    };

    return {
      handleClose,
      toEdit,
      deleteCancel,
      props,
    };
  },
});
</script>

<style lang="less" scoped>
.desc-table {
  margin-top: 10px;
  :deep(.ant-descriptions-view table) {
    table-layout: fixed;
  }
}
</style>
